<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="_meta :: header">
    <title>列表</title>
</head>
<body>
    <div class="x-nav">
              <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">数据分析</a>
                <a>
                  <cite>学生维度</cite></a>
              </span>
        <a class="layui-btn layui-btn-small" style="float: right;height: 30px;line-height: 30px;margin-top: 5px;" onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
    </div>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body " style="display: flex;justify-content: start">
                        <form action="#" class="layui-form layui-col-space5">
                            <div class="layui-inline" id="examTree" style="width: 250px"></div>

                            <div class="layui-inline">
                                <select name="dimensionCode" id="dimensionCode"  th:field="${dimensionList}">
                                    <option value="">维度选择</option>
                                    <option th:each="dimension:${dimensionList}"
                                            th:text="${dimension.desc}" th:value="${dimension.code}"></option>
                                </select>
                            </div>

                            <div class="layui-inline">
                                <input type="text"  step="0.001" class="layui-input" name="nameList" placeholder="学生姓名,多个请用','间隔" id="nameList" />
                            </div>

                        </form>
                        <div class="layui-inline" style="margin-left: 10px">
                            <button id="search" class="layui-btn layui-btn-success radius"><i class="layui-icon">&#xe62c;</i> Analysis
                            </button>
                        </div>

                    </div>
                        <div id="main" style="width: 800px;height:500px;margin: 25px auto"></div>
                </div>
            </div>
        </div>
    </div>

    <!--_footer 作为公共模版分离出去-->
    <div th:replace="_footer :: footerjs">
    </div>
    <!-- 导入echarts -->
    <script th:src="@{/js/echarts/4.9.0/echarts.min.js}"></script>

    <script th:src="@{/xmselect/xm-select.js}"></script>


    <script th:inline="javascript">

        layui.use(['form'], function(){
            var form = layui.form;
            form.render('select');
        });


        var sm_exam;

        $(function(){
            sm_exam = xmSelect.render({
                el: '#examTree',
                name: 'examList',
                tips:"请选择考试场次",
                toolbar: {
                    show: true,
                    showFolderIcon: true,//扩展建
                    list: ['CLEAR']
                    //     list: ['ALL', 'CLEAR']
                },
                model: {
                    label: {
                        type: 'block',
                        block: {
                            //最大显示数量, 0:不限制
                            showCount: 1,
                            //是否显示删除图标
                            showIcon: true,
                        }
                    }
                },
                filterable: true,
                height: '500px',
                autoRow: true,
                tree: {
                    show: true,
                    showFolderIcon: true,
                    showLine: false,
                    expandedKeys: true,
                },
                data: [[${examList}]],
                //strict: true,
            })
        })


        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));


        $("#search").bind("click",function (){
            // 获取考试
            let examList = sm_exam.getValue('value');
            // 获取维度
            let dimensionCode = $("#dimensionCode").val();
            // 获取学生姓名
            let nameList = $("#nameList").val();

            if (!examList || !dimensionCode || !nameList) {
                layer.msg("请完善信息",{icon:0,time:1000})
            }

            console.log("examList: ", examList)
            console.log("examNameList: ", sm_exam.getValue('name'))
            console.log("dimensionCode: ", dimensionCode)
            console.log("nameList: ", nameList)

            var data = {
                nameList: nameList,
                examList: examList,
                dimension: dimensionCode
            }
            console.log("data:", data)
            $.ajax({
                url:'/rest/data/analysis/student',// 跳转到 action
                type:'post',
                cache:false,
                data:JSON.stringify(data),
                dataType:'json',
                contentType:"application/json",  //发送信息至服务器时内容编码类型。
                success:function(res) {
                    console.log("res data:", res)

                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: res.title + '分析'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: res.nameList
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: res.examNameList
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: res.scoreResult
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);


                },
                error : function() {
                    layer.msg("发生未知错误");
                }
            });

        })



    </script>
</body>
</html>